<template>
	<div class="mine">
		<div class="mine_wrap">
			<div class="personal floatClear">
				<div class="personal_i floatLeft">
					<img src="../assets/images/g.jpg" class="avatar">
					<span class="nickname">{{personal.nickname}}</span>
				</div>
				<div class="personal_msg floatLeft">
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-icon-test"></use>
					</svg>
				</div>
			</div>
			<div class="info_wrap floatClear">
				<div class="indent floatLeft">
					<svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan-"></use>
                    </svg>
					<p class="icon_text">订单管理</p>
				</div>
				<div class="collect floatLeft">
					<svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_collect"></use>
                    </svg>
					<p class="icon_text">收藏</p>
				</div>
			</div>
		</div>
		
	

		<div class="mine_wrap fund">
			<div class="yue cell">
				余额
			</div>
			<div class="youhuiquan cell">
				优惠券
			</div>
		</div>

		<div class="mine_wrap elsell">
			<div class="freell cell">
				上课流量免费
			</div>
		</div>

		<div class="mine_wrap personal_set">
			<div class="feedback cell">
				反馈建议
			</div>
			<div class="set cell">
				设置
			</div>
		</div>


	</div>
</template>

<script>
export default {
	name:'mine',
	data(){
		return {
			personal:{
				nickname:'土豆爱吃薯条',
				avatar:'cc',
				coupon:0,
				remainingSum:0,
			}
		}
	}
}
</script>

<style scoped>
.mine{
	width: 100%;
	height: 100%;
	background-color: #f2f2f6;
}
.mine_wrap{
	background-color: #fff;
	margin-bottom:20px;
	font-size:0.38rem;
}
.cell:last-child{
	border:none;
}


/*图标 （订单 收藏 信息）*/
.icon{
	font-size:1rem;
	/*padding:0.5rem;*/
}
.icon_text{
	margin-top:0.2rem;
}


/*个人信息*/
.personal{
	display: flex;
	justify-content:space-between;
}
.personal_i{
	width: 8rem;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0.5rem 0 0.5rem 1rem;
}
.avatar{
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
}
.nickname{
	font-size:0.6rem;
	font-weight:bolder;
	text-align:center;
	margin-left:10px;
}
.personal_msg{
	width: 2rem;
	display: flex;
	align-items: center;
	justify-content:center;
}


/*订单管理 收藏*/
.info_wrap{
	border-top:1px solid #e1e1e1;
}
.indent, .collect{
	width: 50%;
	text-align: center;
	padding:0.5rem 0;
}

/**/
.cell{
	width: calc(100% - 20px);	
	font-size:0.4rem;
	line-height: 1rem;
	margin-left:20px;
	border-bottom:1px solid #e1e1e1 ;
	color:#000;
	position:relative;
}
.cell:after{
	content: "\003e";
	width: 1rem;
	height: 1rem;
	text-align: center;
	position: absolute;
	right:0;
}





</style>